<template>
	<view class="">
		<navbar :title="navTitle" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		</navbar>
		<view class="tabBox" v-if="type == 'member'">
			<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false" :scroll-into-view="'id'+current">
				<view :class="current == item ? 'tab scroll-view-item_H act' : 'tab scroll-view-item_H'"
					v-for="(item, index) in typeList" :id="'id'+item" @tap="current = item" :key="index">
					{{item == 0?$t('common.all'):$t('team.one', {num: lvNumber[item]})}}
				</view>
			</scroll-view>
		</view>
		<view class="box" >
			<mescroll-body ref="mescrollRef" @up="upCallback" @init="mescrollInit" @down="downCallback"
			:down="downOption" :up="upOption">
			<mteam :listProp="list" :leftValue="'level'" :rightValue="type == 'total'?'commission':(type == 'member'?'time':'today_commission')"></mteam>
			</mescroll-body>
		</view>
	</view>
		
</template>

<script>
	import {
		myteamlist,
		commissionlist 
	} from '@/api/team.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
	export default{
		mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		data() {
			return {
				type: '',
				list: [],
				lvNumber: ['-','A','B','C'],
				typeList: [0,1,2,3],
				current: 0,
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0,
						size: 10
					}
				},
			}
		},
		onLoad(option) {
			this.type = option.type;
			// this.load(option.level)
		},
		watch:{
			'current' (val) {
				this.mescroll.resetUpScroll()
			}
		},
		computed: {
			navTitle() {
				let str = '';
				if (this.type == 'total') {
					str = 'Total revenue'
				}
				if (this.type == 'today') {
					str = 'Receive today'
				}
				if (this.type == 'member') {
					str = 'Team size'
				}
				return str
			}
		},
		methods: {
			async upCallback(page) {
				let api;
				let status = 0;
				let level = this.current;
				if (this.type == 'today') {
					api = commissionlist;
					status = 1;
					level = undefined;
				}
				if (this.type == 'total') {
					api = commissionlist;
					status = 0;
					level = undefined;
				}
				if (this.type == 'member') {
					api = myteamlist
					status = undefined;
				}
				let result = await api({
					level,
					status,
					page: page.num,
				})
				if (page.num == 1) this.list = []
				this.list = this.list.concat(result)
				let curPageLength = result.length
				this.mescroll.endSuccess(curPageLength)
			},
			async load(val) {
				let api;
				let status = 0;
				let level = this.current;
				if (this.type == 'today') {
					api = commissionlist;
					status = 1;
					level = undefined;
				}
				if (this.type == 'total') {
					api = commissionlist;
					status = 0;
					level = undefined;
				}
				if (this.type == 'member') {
					api = myteamlist
					status = undefined;
				}
				let result = await myteamlist({
					level,
					status,
					page: 1
				})
				this.list = result;
			}
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #F6F6F6FF;
	}
</style>
<style lang="scss" scoped>
	
	.box{
		background: #fff;
		padding: 0 30rpx;
		.box-item{
			display: flex;
			align-items: center;
			padding: 40rpx 0;
			border-bottom: 2rpx solid #ECECEC;
			.avatar{
				margin-right: 10rpx;
			}
			.content {
				flex:1;
			}
		}
		.box-item:last-child{
			border:none;
		}
	}
	.tabBox {
		padding: 0 40rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		padding: 0 10rpx;
		margin-right: 20rpx;
		display: inline-block;
		font-size: 30rpx;
		color: #000000;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
	}
	.tabBox {
		padding: 0 28rpx;
		height: 88rpx;

		.tab {
			font-size: 31rpx;
			color: #281912;
			height: 88rpx;
			text-align: center;
			opacity: 0.5;
			&.act {
				color: #281912;
				opacity: 1;
			}
		}

		.right {
			width: 36rpx;
			height: 36rpx;
			padding: 10rpx;
		}
	}
</style>
